<#import "../home/masterTemplate.ftl" as layout />
<#include "../macros/utils.ftl" />
<#include "./includes/utils.ftl"/>
<#import "../macros/spring.ftl" as spring />

<#----><#include "/dumps/dump-util.ftl" />

<#assign scriptsObj>
	<#if isMobile()>

	<#else>
		require(["../../js/modules/form", "../../js/questions/questions"], function() {
	</#if>
		base.init();
		base.questions.init();

	<#if !isMobile()>
		});
	</#if>
</#assign>

<#function checkIfPresented topic>
	<#if topic.id == m_site.m_question.topic.id>
		<#return true />
	</#if>
	<#return false />
</#function>


<@layout.masterTemplate wtSection="" wtSubsection="" title="" bodycss="" wrappercss="bg" section="questions" subsection="" pagename="" color="" sectionIdx="2">

	<@backHeader "Update" "Questions" /> 
	<#assign question = m_site.m_question />
	<div class="col1-of-2">
		<div class="frm comment-form cf" id="updateQuestion" data-async="true" data-type="update">
			<div class="btn-group enable-buttons" data-toggle="buttons">
				<label class="btn btn-primary enable">
					<input type="radio"  value="1">enable
				</label>
				<label class="btn btn-primary disable active">
					<input type="radio" checked>disable
				</label>
	      	</div>

			<form class="cf" action="<@spring.url '/questions/update_input/' />" method="POST">
				  <input type="hidden" name="id" id="questionId" value="${question.id}" />
		  		  <div class="form-group">
		  		  	<label for="description">description:</label>
		  		  	<textarea class="form-control" id="description" name="description" placeHolder="description" rows="3" title="description" required="required" data-rules="maxlength:255">${question.description}</textarea>
		  		  </div>

			       <div class="form-group ">
			       	<label for="explanation">explanation:</label>
			       	<textarea class="form-control" id="explanation" name="explanation" placeHolder="explanation" rows="3" title="explanation" required="required" data-rules="maxlength:255">${question.explanation}</textarea>
			       </div>

					<div class="form-group  inline-block">
						<label for="duration">duration:</label>
						<input type="number"  placeHolder="seconds" class="form-control" id="duration" name="duration" title="duration"  maxlength="3" required="required" data-rules="number,maxlength:3" value="${question.seconds}"/>
					</div><br>

			        <div class="form-group visible  inline-block">
			          <label for="topic" class="control-label input-group">please select a related topic:</label>
			        	<select class="form-control topics selectpicker" data-live-search="true" name="topic" id="topic" title="Topic" required="required">
			             <#if getList(m_site.m_topicsList)?size gt 0>
			          	   <#list getList(m_site.m_topicsList) as topic>
			                  <option value="${topic.id}" <#if checkIfPresented(topic)>selected</#if> >${topic.title}</option>
			               </#list>
			             </#if>
			        	</select>
			        </div><br>

			        <div class="form-group  inline-block">
			        	<label for="points">total points:</label>
			        	<input type="number" class="form-control" id="points" name="points" title="Points" required="required"  placeHolder="points" maxlength="3" data-rules="number,maxlength:3" value="${question.points}"/>
			        </div><br>


					<div class="btn-group form-group" data-toggle="buttons">
					  	<label for="active" class="control-label input-group">is it an active question?:</label>
						<label class="btn btn-primary <#if question.isActive() == true>active</#if>">
							<input type="radio" name="active" value="1" <#if question.isActive() == true>checked</#if>>active
						</label>
						<label class="btn btn-primary <#if question.isActive() == false>active</#if>">
							<input type="radio" name="active" value="0" <#if question.isActive() == false>checked</#if>>inactive
						</label>
					</div>

		   		  <div class="btn-group form-group right" data-toggle="buttons">
		     		  	<label for="level" class="control-label input-group">level:</label>
		       			<label class="btn btn-primary <#if question.level == 1>active</#if>">
		       				<input type="radio" name="level" value="1" <#if question.level == 1>checked</#if>>easy
		       			</label>
		       			<label class="btn btn-primary <#if question.level == 2>active</#if>">
		       				<input type="radio" name="level" value="2" <#if question.level == 2>checked</#if>>medium
		       			</label>
		       			<label class="btn btn-primary <#if question.level == 3>active</#if>">
		       				<input type="radio" name="level" value="3" <#if question.level == 3>checked</#if>>hard
		       			</label>
			        </div>
					<div class="alert alert-info"><strong>Note:</strong> If question is not on active state, It won't be considered as part of any future exam.</div>

			  		<div class="cf confirm"><a class="btn btn-primary submit right" role="button">save</a></div>

			</form>
		</div>
	</div>
	<div class="col2-of-2">
		<div class="itemsWrapper items-wrapper">
			<div class="page-header">
				<h1>Options <small>Manager</small>
					<a class="btn-add" data-value="${contextRoot}/questions/addItem">
						<span class="glyphicon-class">add +</span>
					</a>
				</h1>
			</div>
			
			<div class="frm body well" data-async="true" data-type="add" style="display:none;">
				<a class="cancel close" data-id="">close</a>
				<form action="<@spring.url '/questions/manageItems/' />" data-async="true" method="POST">
					<input type="hidden" name="que_id" id="que_id" value="${question.id}" />
					<input type="hidden" id="ite_id" name="ite_id" value="">
					<div class="form-group">
						<label for="itemDescription">description:</label>
						<textarea class="form-control" id="itemDescription" name="itemDescription" placeHolder="description" rows="3" title="description" required="required" data-rules="maxlength:255"></textarea>
					</div>
					<div class="btn-group form-group toggle" data-toggle="buttons">
					  	<label for="isCorrect" class="control-label input-group"> is this the correct answer?:</label>
						<label class="btn btn-primary correct">
							<input type="radio" name="isCorrect" value="1">yes
						</label>
						<label class="btn btn-primary incorrect active">
							<input type="radio" name="isCorrect" value="0" checked>no
						</label>
					</div>
					<div>
						<a class="btn btn-primary submit right" role="button">submit</a>
					</div>
				</form>
			</div>

			<div class="itemList" data-load="<@spring.url '/questions/getItems' />">
				<#if question.itemsList??>
					<#assign itemList = getList(question.itemsList) />	
					<#if itemList?size gt 0>
						<#list itemList as item>
							<@itemItem item /> 
						</#list>
					<#else>
						<div class="alert alert-warning">
						 	No items have been registered for this question yet.
						</div>
					</#if>
				</#if>
			</div>


			<#--delete form-->
			<input type="hidden" class="delete-link" value="<@spring.url '/questions/removeItem/' />">
		</div>
	</div>

	<#----><@dumper m_site "m_site" false true/>
</@layout.masterTemplate>